<template>
  <vue-tabs-chrome 
  ref="tabChrome"
  v-model="tab"
  :tabs="tabs" 
  @click="handleTabClick"
  @remove="handleRemove"
  :onClose="onClose"
  :maxWidth = "tabMaxWidth"
  />
</template>
<script>
  import VueTabsChrome from 'vue-tabs-chrome'

  export default {
    components: {
      VueTabsChrome
    },
    props: {
        tabValue: {
            type:Object
        },
        // list: {
        //     type: Array,
        //     default () {
        //         return []
        //     }
        // },
        // enter:{
        //     type:Function
        // },
        // out:{
        //     type:Function
        // },
        // closeHandler:{
        //     type:Function
        // }  

    },
    watch: {
        tabValue(val){
          // alert(val.name)  
          this.addTab(val);
        }
    },
    mounted(){
       this.tabListInit();        
    },
    data() {
      return {
        tabMaxWidth:150,
        tab: 'home',
        tabs: JSON.parse(window.sessionStorage.getItem("TagList"))?JSON.parse(window.sessionStorage.getItem("TagList")):[]
        // tabs: [
        // {
        //   label: 'home',
        //   key: 'home',
        //   // favico: require('./assets/google.jpg')
        // },
        // {
        //   label: 'home',
        //   key: 'home',
        //   // favico: require('./assets/fb.jpg')
        // }]
      }
    },
    methods:{
        tabListInit(){
            var _this = this;
            console.log("初始化对象",this.tabs)
            var currentPath = this.$route.path.replace("/","");
            // var tagList = JSON.parse(window.sessionStorage.getItem("TagList"));
            // _this.tabs = tagList ? tagList : [];
            
            // console.log('缓存数据----》',JSON.stringify(tagList));
            // 如果为空的默认显示首页
            if (_this.tabs.length == 0) {

              _this.tabs.push({key:'home',label:'首页',path:"/home",name:"首页",})
              // this.addTag({ fullPath: "/home",key:'home',label:'首页',meta: {title: '首页'} });//初始化导航，默认为首页
            }
            else{
              _this.tabs.map((item, index) => {
                item.label = item.name;
                item.key = item.path.replace("/","");
              });
            }
            this.tab = this.tabs.length>0?currentPath?currentPath:"home":"home";
        },
        addTab (item) {
          // let item = 'tab' + Date.now()
          // let newTabs = [
          //   {
          //     label: 'New Tab',
          //     key: item
          //   }
          // ]
          var addTab = this.tabs.filter(tab =>tab.key ==item.key); 
          if(addTab.length==0)
          {
            this.$refs.tabChrome.addTab(item)
            var getTabs = this.$refs.tabChrome.getTabs();
            getTabs.map(tab =>{
                tab.path = "/"+tab.key;
                tab.name = tab.label;
            })
            window.sessionStorage.setItem('TagList', JSON.stringify(getTabs))
          }
          this.tab = item.key
        },
        //删除tab
        handleRemove (tab, index) {
          console.info('tabs', this.tabs)
          this.$refs.tabChrome.removeTab(tab)
          
          var getTabs = this.$refs.tabChrome.getTabs();
            getTabs.map(tab =>{
                tab.path = "/"+tab.key;
                tab.name = tab.label;
            })

          var path = "/"+this.tab;
         
          window.sessionStorage.removeItem("TagList");
          console.log("最新标签",JSON.stringify(getTabs))
          window.sessionStorage.setItem('TagList', JSON.stringify(getTabs))
          if(getTabs.length == 0){
             this.addTab({key:'home',label:'首页',path:"/home",name:"首页",})
             this.$emit('input', {item:"/home",ifHover:true,index})
          }else{
            this.$emit('input', {item:path,ifHover:true,index})
          }


        },
        onClose (tab, key, index) {
          console.log(tab, key, index)
          // do not update tab key
          // if (key === 'home') {
          //   // alert('you cant close this tab')
          //   return false
          // }
          return true
        },
        // 点击tab
        handleTabClick (e, tab, index) {
          console.info(e, tab, index)
          var path = tab.path?tab.path:"/"+tab.key;
          this.$emit('input', {item:path,ifHover:tab.ifHover,index})
        }
    }
  }
</script>
<style lang="less">

.vue-tabs-chrome .tabs-background-content{
    background-color: rgba(255,255,255,0.4);
}
</style>